<template>





  <el-form :inline="true" :model="startQuery" class="demo-form-inline">
    <el-form-item label="耳号">
      <el-input v-model="startQuery.EarTagNumber" clearable />
    </el-form-item>

    <el-form-item label="品种">

      <el-select v-model="startQuery.EarTagBreeds" placeholder="请选择" size="large" style="width: 240px">
        <el-option v-for="item in GetBreed" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item label="使用状态">
      <el-select style="width: 100px" v-model="startQuery.EarTagBirthStatus" placeholder="请选择" clearable>
        <el-option label="未使用" value="1" />
        <el-option label="使用" value="2" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="GetEagList">查询</el-button>
      <el-button type="danger" @click="DeleteRanges()">批量删除</el-button>
      <el-button type="danger" @click="adds()">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="earTagNumber" label="耳标" width="180" />
    <el-table-column prop="earTagBreeds" label="品种" width="180" v-slot="scope">
      <span v-if="scope.row.earTagBreeds == 1">杜泊</span>
      <span v-else-if="scope.row.earTagBreeds == 2">澳洲白</span>
      <span v-else-if="scope.row.earTagBreeds == 3">萨福克</span>
      <span v-else-if="scope.row.earTagBreeds == 4">杜湖</span>
      <span v-else-if="scope.row.earTagBreeds == 5">杜杜湖</span>
      <span v-else-if="scope.row.earTagBreeds == 6">萨杜湖</span>
      <span v-else-if="scope.row.earTagBreeds == 7">奥湖</span>
      <span v-else-if="scope.row.earTagBreeds == 8">湖羊</span>
      <span v-else-if="scope.row.earTagBreeds == 9">奥杜湖</span>
    </el-table-column>
    <el-table-column prop="earTagInHouseDate" label="出生日期" width="180" v-slot="scope">
      {{ scope.row.earTagInHouseDate.substring(0, 10) }}
    </el-table-column>
    <el-table-column prop="earTagBirthStatus" label="使用状态" width="180" v-slot="scope">
      <span v-if="scope.row.earTagBirthStatus == 1">未使用</span>
      <span v-else>使用</span>
    </el-table-column>

    <el-table-column prop="earTagUseStatus" label="出生状态" width="180" v-slot="scope">
      <span v-if="scope.row.earTagUseStatus == true">活羔</span>
      <span v-else>死羔</span>
    </el-table-column>

    <el-table-column prop="" label="入库操作人" width="180" />
    <el-table-column prop="" label="入库日期" width="180" />

    <el-table-column prop="" label="操作" width="180" v-slot="scope">
      <el-button type="danger" @click="deletes(scope.row.id)">删除</el-button>
      <el-button type="danger" @click="Updates(scope.row.id)">修改</el-button>
    </el-table-column>
  </el-table>
  <table>
    <tr>
      <!-- <td>
        <el-pagination v-model:current-page="startQuery.PageIndex" v-model:page-size="startQuery.PageSize"
          :page-sizes="[3, 7, 10, 20]" :size="size" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </td> -->
      <td>
        <el-pagination v-model:current-page="startQuery.PageIndex" v-model:page-size="startQuery.PageSize"
          :page-sizes="[3, 7, 10, 20]" :size="size" :disabled="disabled" :background="background" layout="slot"
          :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <span>
            当前{{ startQuery.PageIndex }}/{{ page.totalPage }},共{{
    page.total
  }}条数据
          </span>
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="startQuery.PageIndex" v-model:page-size="startQuery.PageSize"
          :page-sizes="[3, 7, 10, 20]" :size="size" :disabled="disabled" :background="background" prev-text="上一页"
          next-text="下一页" layout="sizes,slot, prev, pager, next" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          <el-button type="primary" @click="handleCurrentChange(1)">
            首页
          </el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="startQuery.PageIndex" v-model:page-size="startQuery.PageSize"
          :page-sizes="[3, 7, 10, 20]" :size="size" :disabled="disabled" :background="background" prev-text="上一页"
          next-text="下一页" layout="slot, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          <el-button type="primary" @click="handleCurrentChange(page.totalPage)">
            尾页
          </el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import starts from "@/api/EarTagManagement/index";

import { startQuert } from "@/api/EarTagManagement/model";
import axios from "axios";
import { number } from "echarts";
import { useRouter } from 'vue-router';
const useRoute = useRouter()

const Updates = (id) => {
  useRoute.push({
    path: "/Eleartag",
    query: {
      id: id,
    },
  });

}




const startQuery = reactive<startQuert>({
  EarTagNumber: "",
  EarTagBreeds: null,
  EarTagBirthStatus: null,
  EarTagUseStatus: null,
  PageIndex: 1,
  PageSize: 10,
});
const page = reactive({
  total: 0,
  totalPage: 0,
});

const Checkeds = ref();
const ids = ref([])
const handleSelectionChange = (val: []) => {
  Checkeds.value = val;
  Checkeds.value.forEach(item => {
    ids.value.push(item.id)
  })
};

const tableData: any = ref([]);

const GetEagList = () => {
  starts.getList(startQuery).then((res: any) => {
    console.log("数据", res.data.data);
    (tableData.value = res.data.data),
      (page.total = res.data.total),
      (page.totalPage = res.data.totalPage);
  });
};

const GetBreed = ref([])
const GetShowEarBreed = () => {
  starts.GetShowbreed().then((res: any) => {
    GetBreed.value = res.data
  })
}

const deletes = (id: number) => {
  starts
    .deleteStart(id)
    .then((res: any) => {
      ElMessageBox.confirm("您确定要删除吗", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (res.data > 0) {
          ElMessage.success("删除成功");
          GetEagList();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

const DeleteRanges = () => {
  if (ids.value.length == 0) {
    ElMessage({
      message: '请选择要删除的数据',
      type: 'warning',
    })
    return
  }
  ElMessageBox.confirm(
    '您确定要删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      starts.DeleteRan(ids.value).then((res: any) => {
        if (res.data > 0) {
          ElMessage.success("删除成功");
          GetEagList();
        }
        else {
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

};

const handleSizeChange = (val: number) => {
  startQuery.PageSize = val;
  startQuery.PageIndex = 1;
  GetEagList();
};
const handleCurrentChange = (val: number) => {
  startQuery.PageIndex = val;
  GetEagList();
};
onMounted(() => {
  GetEagList();
  GetShowEarBreed();
});
</script>
